<template>
  <span>
    {{ result }}
  </span>
</template>

<script>
export default {
  name:'number',
  props:{
    值:{
      type:[Number,String],
      default:function(){return 0},
    },
    方向:{
      type:[String],
      validator: function (val) {
        return ['ltr','rtl'].includes(val)
      },
      default:function(){return 'ltr'},
    },
    每隔几位:{
      type:Number,
      validator: function (val) {
        return val >= 2
      },
      default:function(){return 0},
    },
    分隔符:{
      type:String,
      validator: function (val) {
        return [' ',',','-','_'].includes(val)
      },
      default:function(){return ','},
    },
  },
  computed:{
    result:function(){
      let arr = this.值.split('');
      let per = this.每隔几位;
      let spe = this.分隔符;
      if(this.方向 == 'ltr'){
        return arr.reduce((t,v,i,a)=>{
          let str = '';
          if( (i%per == per-1) && (i != a.length-1) ){
            str = v + spe;
          }else{
            str = v;
          }
          return t = t + str;
        },'')
      }else{
        return arr.reduceRight((t,v,i,a)=>{
          let str = '';
          let idx = a.length - 1 - i;
          if( (idx%per == per-1) && (idx != a.length - 1 ) ){
            str = spe + v;
          }else{
            str = v;
          }
          return t = str + t;
        },'')
      }
    },
  },
  data(){
    return {}
  },
}
</script>

<style>

</style>